<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>后台-邮件管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap.min.css"/>
	<link href="/gradesign/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/sweetalert.css"/>
	<link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap-table.min.css"/>
    <style type="text/css">
    	html{width: 98.5% !important;}
		body{
        	background:transparent;
   			 }
   		.form-control{width:auto;}
   		.control{width:100% !important}
   		.strange{width:auto}
   		.th-inner {background-color:#f4f4f4}
   		section{
    		margin:0px 20px;
    	}
    	table{table-layout:fixed}
    	td{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    </style>
</head>
<body>
	<section class="content-header">
		<h4>后台-邮件管理</h4>
	</section> 
	<section class="content table-content">
		<form class="form-horizontal" >
			<div class="row">
				<div class="col-md-4">
					<div class="form-group">
						<label for="sendFamilyAccount" class="control-label col-sm-4">发送家庭：</label>
						<input type="text" id="sendFamilyAccount" class="form-control col-sm-8"></input>
					</div>
				</div>
				<div class="col-md-4">
					<div class="form-group">
						<label for="emailReciver" class="control-label col-sm-4">收信邮箱：</label>
						<input type="text" id="emailReciver" class="form-control col-sm-8"></input>
					</div>
				</div>
				<div class="col-md-3">
					<button type="button" id="editBtn" class="btn btn-primary" onclick="initDataGrid()"><span class="glyphicon glyphicon-search"></span>查询</button>
					<button type="button" id="editBtn" class="btn btn-primary" onclick="clearParams()"><span class="glyphicon glyphicon-refresh"></span>清空</button>
					<button type="button" id="editBtn" class="btn btn-info" onclick="sendEmail()"><span class="glyphicon glyphicon-envelope"></span>发送邮件</button>
				</div>
			</div>
		</form>
		<table id="dataGrid">
		</table>
	</section>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/yongqi.js"></script>
<script type="text/javascript" src="/gradesign/js/sweetalert.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
	//初始化
	$(function(){
		initDataGrid();
	});
	function initDataGrid(){
		$("#dataGrid").bootstrapTable('destroy');
		//创建bootstraptable
		$("#dataGrid").bootstrapTable({
			method:"get",
			cache: false,         
			//缺失无法执行queryParams,传递Page参数
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			url : "/gradesign/back/email/query",
			queryParams : queryParam,
			pagination : true,//显示分页条：页码，条数等
			striped : true,//隔行变色
			pageNumber : 1,//首页页码
			pageSize : 10,//分页，页面数据条数
			pageList: [10,20,30,40],
			uniqueId : "id",//Indicate an unique identifier for each row
			sidePagination : "server",//在服务器端分页
			height:dataGrid.height,
			toolbar : "#toolbar",//工具栏
			columns : [{
				checkbox : true,
				field : "box"
			},{
				title : "Id",
				field : "id",
				visible : false
			},{
				title : "发送家庭",
				field : "email_family"
			},{
				title : "邮件主题",
				field : "email_subject",
				width : 160
			},{
				title : "邮件内容",
				field : "email_content",
				width : 250
			},{
				title : "收信邮箱",
				field : "email_to",
				width : 230
			},{
				title : "发送时间",
				field : "created_time",
				width : 150
			},{
				title : "已读",
				field : "readed"
			},{
				title : "操作",
				field : "operate",
				formatter : "operateFormatter"
			}],
		});
	}
	
	function queryParam(params){
		var param = {
				limit : this.limit,//页面大小
				offset : this.offset,//页码
				pageNumber : this.pageNumber,
				pageSize : this.pageSize,
				sortName : this.sortName,
				sortOrder : this.sortOtder,
				email_family : $("#sendFamilyAccount").val(),
				email_to : $("#emailReciver").val()
		}
		return param;
	};
	function clearParams(){
		$("#sendFamilyAccount").val("");
		$("#emailReciver").val("")
	}
	function operateFormatter(value,row,index){
		var id = "\'"+row.id+"\'";
		return '<a><span style="margin:5px" class="glyphicon glyphicon-zoom-in" onclick="detail('+id+')"></span></a>'+
				'<a><span style="margin:5px" class="glyphicon glyphicon-trash" onclick="deleteRow('+id+')"></span></a>';
	}
	 
	function deleteRow(id){
		var params = {};
		params.id = id;
		yongqi.swatDelConfirm("/gradesign/back/email/delete",params,function(){
			$("#dataGrid").bootstrapTable('refresh');
		});
	}
	function sendEmail(){
		window.location.href="/gradesign/back/email/send";
	}
	function detail(id){
		window.location.href="/gradesign/back/email/detail?id="+id;
	}
</script>
</html>